<template>
  <div
    v-if="visible"
    id="ms-drawer"
    class="ms-drawer"
    :class="directionStyle"
    :style="{ width: w + 'px', height: h + 'px' }"
    ref="msDrawer"
  >
    <ms-bottom2-top-drag-bar v-if="direction == 'bottom'" />

    <ms-right2-left-drag-bar v-if="direction == 'right'" />

    <ms-right2-left-drag-bar v-if="direction == 'default'" />

    <div class="ms-drawer-header">
      <slot name="header"></slot>
      <i v-if="isShowClose" class="el-icon-close" @click="close" />
      <ms-full-screen-button
        v-if="showFullScreen"
        :is-full-screen.sync="isFullScreen"
      />
    </div>
    <div class="ms-drawer-body">
      <slot></slot>
    </div>

    <ms-left2-right-drag-bar v-if="direction == 'left'" />
  </div>
</template>

<script>
import MsRight2LeftDragBar from "./dragbar/MsRight2LeftDragBar";
import MsLeft2RightDragBar from "./dragbar/MsLeft2RightDragBar";
import MsBottom2TopDragBar from "./dragbar/MsBottom2TopDragBar";
import MsFullScreenButton from "./MsFullScreenButton";

export default {
  name: "MsDrawer",
  components: {
    MsFullScreenButton,
    MsBottom2TopDragBar,
    MsLeft2RightDragBar,
    MsRight2LeftDragBar,
  },
  data() {
    return {
      x: 0,
      y: 0,
      w: 100,
      h: 100,
      directionStyle: "left-style",
      dragBarDirection: "vertical",
      isFullScreen: false,
      originalW: 0,
      originalH: 0,
    };
  },
  props: {
    appendToBody: {
      type: Boolean,
      default: false,
    },
    direction: {
      type: String,
      default() {
        return "left";
      },
    },
    visible: {
      type: Boolean,
      default() {
        return true;
      },
    },
    size: {
      type: Number,
      default() {
        return 40;
      },
    },
    showFullScreen: {
      type: Boolean,
      default() {
        return true;
      },
    },
    isShowClose: {
      type: Boolean,
      default() {
        return true;
      },
    },
  },
  mounted() {
    this.init();
  },
  watch: {
    isFullScreen() {
      if (this.isFullScreen) {
        this.fullScreen();
      } else {
        this.unFullScreen();
      }
    },
    visible(val) {
      if (val && this.appendToBody) {
        document.body.appendChild(this.$el);
      }
    },
  },
  methods: {
    setfullScreen() {
      if (!this.isFullScreen) {
        this.$nextTick(() => {
          this.isFullScreen = true;
        });
      }
    },
    init() {
      window.addEventListener("resize", this.listenScreenChange, false);
      //  todo 其他方向待优化
      switch (this.direction) {
        case "left":
          this.w = this.getWidthPercentage(this.size);
          this.h = this.getHeightPercentage(100);
          this.x = 0;
          this.y = 0;
          this.directionStyle = "left-style";
          this.dragBarDirection = "horizontal";
          break;
        case "right":
          this.w = this.getWidthPercentage(this.size);
          this.h = this.getHeightPercentage(100);
          this.x = document.body.clientWidth - this.w;
          this.y = 0;
          this.directionStyle = "right-style";
          this.dragBarDirection = "horizontal";
          break;
        case "top":
          this.w = this.getWidthPercentage(100);
          this.h = this.getHeightPercentage(this.size);
          this.x = 0;
          this.y = 0;
          this.directionStyle = "top-style";
          this.dragBarDirection = "vertical";
          break;
        case "bottom":
          this.w = this.getWidthPercentage(100);
          this.h = this.getHeightPercentage(this.size);
          this.x = 0;
          this.y = document.body.clientHeight - this.h;
          this.directionStyle = "bottom-style";
          this.dragBarDirection = "vertical";
          break;
        default:
          this.w = this.getWidthPercentage(this.size);
          this.h = this.getHeightPercentage(100);
          this.x = document.body.clientWidth - this.w;
          this.y = 0;
          this.directionStyle = "right-style";
          this.dragBarDirection = "horizontal";
          break;
      }
    },
    getWidthPercentage(per) {
      return (document.body.clientWidth * per) / 100.0;
    },
    getHeightPercentage(per) {
      return (document.body.clientHeight * per) / 100.0;
    },
    fullScreen() {
      if (this.originalW === 0) {
        this.originalW = this.w;
      }
      if (this.originalH === 0) {
        this.originalH = this.h;
      }
      this.w = document.body.clientWidth;
      this.h = document.body.clientHeight;
      this.$emit("changeScreen", this.h);
    },
    unFullScreen() {
      this.w = this.originalW;
      this.h = this.originalH;
      this.$emit("changeScreen", this.h);
    },
    close() {
      this.$emit("close");
      window.removeEventListener("resize", this.listenScreenChange);
    },
    listenScreenChange() {
      if (this.isFullScreen) {
        this.w = document.body.clientWidth;
        this.h = document.body.clientHeight;
      } else {
        switch (this.direction) {
          case "left":
            this.h = document.documentElement.clientHeight;
            break;
          case "right":
            this.h = document.documentElement.clientHeight;
            break;
          case "top":
            this.w = document.documentElement.clientWidth;
            break;
          case "bottom":
            this.w = document.documentElement.clientWidth;
            break;
          default:
            this.h = document.documentElement.clientHeight;
            this.w = document.documentElement.clientWidth;
            break;
        }
      }
    },
  },
  beforeDestroy() {
    if (this.$el?.style && this.appendToBody) {
      document.body.removeChild(this.$el);
    }
  },
};
</script>

<style scoped>
.ms-drawer {
  background-color: white;
  border: 1px #dcdfe6 solid;
  -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
  z-index: 999 !important;
  position: fixed;
  overflow: auto;
}

.left-style {
  top: 0;
  left: 0;
}

.right-style {
  top: 0;
  right: 0;
}

.top-style {
  top: 0;
  left: 0;
}

.bottom-style {
  bottom: 0;
  left: 0;
  border-top: 5px;
}

.ms-drawer-body {
  margin-top: 10px;
  height: calc(100vh - 40px);
  overflow: scroll;
}

.ms-drawer-header {
  z-index: 999;
  width: 100%;
  margin: 0;
}

.bottom-style .ms-drawer-header {
  position: fixed;
}

.el-icon-close {
  position: absolute;
  font-size: 20px;
  right: 10px;
  top: 10px;
  color: gray;
}

.bottom-style .el-icon-close {
  right: 10px;
  top: 13px;
}

.right-style .el-icon-close {
  position: fixed;
  right: 10px;
  top: 10px;
}

.el-icon-close:hover {
  color: red;
}

:deep(alt-ico) {
  position: absolute;
  right: 40px;
  top: 15px;
}
</style>
